<template>
  <div class="numContainer">
    <div class="bcColor"></div>
    <div class="panel monitor">
      <div class="inner">
        <div class="tabs">
          <a href="javascript:;" :class="{ active: activeColor === 'red' }" @click="changeToJingdian">景点信息展示</a>
          <a href="javascript:;" :class="{ active: activeColor === 'blue' }" @click="changeToLuxingshe">旅行社信息展示</a>
        </div>
        <div class="content" style="display: block" v-show="active === 'jingdian'">
          <div class="head">
            <span class="col">地区</span>
            <span class="col">1A景点数</span>
            <span class="col">2A景点数</span>
            <span class="col">3A景点数</span>
            <span class="col">4A景点数</span>
            <span class="col">5A景点数</span>
            <span class="col">总数</span>
          </div>
          <div class="marquee-view">
            <div class="marquee" ref="marquee">
              <div class="row" v-for="(row, index) in jingdianRows" :key="index">
                <span class="col">{{ row[0] }}</span>
                <span class="col">{{ row[1] }}</span>
                <span class="col">{{ row[2] }}</span>
                <span class="col">{{ row[3] }}</span>
                <span class="col">{{ row[4] }}</span>
                <span class="col">{{ row[5] }}</span>
                <span class="col">{{ row[6] }}</span>
                <span class="icon-dot"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="content" style="display: block" v-show="active === 'luxingshe'">
          <div class="head1">
            <span class="col">旅行社名称</span>
            <span class="col">详细地址</span>
          </div>
          <div class="marquee-view">
            <div class="marquee1" ref="marquee1">
              <div class="row" v-for="(row, index) in luxingsheRows" :key="index">
                <span class="col">{{ row[0] }}</span>
                <span class="col">{{ row[1] }}</span>
                <span class="icon-dot"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'dianweiNum',
  data() {
    return {
      jingdianRows: [],
      luxingsheRows: [],
      jingdianDataUrl: '/data-SiChuan/rest/data/featureResults.json?returnContent=true',
      luxingsheDataUrl: '/data-SiChuan/rest/data/featureResults.json?returnContent=true',
      jingdianDataOption: {
        getFeatureMode: 'SQL',
        datasetNames: ['SiChuan:州市景点数量'],
        maxFeatures: 1000,
        queryParameter: {
          sortClause: null,
          ids: null,
          name: null,
          attributeFilter: 'SMID>0',
          groupClause: null,
          linkItems: null,
          joinItems: null,
          fields: null
        }
      },
      luxingsheDataOption: {
        getFeatureMode: 'SQL',
        datasetNames: ['SiChuan:旅行社名录'],
        maxFeatures: 2000,
        queryParameter: {
          sortClause: null,
          ids: null,
          name: null,
          attributeFilter: 'SMID>0',
          groupClause: null,
          linkItems: null,
          joinItems: null,
          fields: null
        }
      },
      active: 'jingdian',
      activeColor: 'red'
    }
  },
  mounted() {
    const marquee = this.$refs.marquee
    // 1、先克隆marquee里面所有的行row
    // 使用 $nextTick 方法等待 DOM 更新
    this.$nextTick(() => {
      // 获取所有的行元素
      const rowElements = marquee.querySelectorAll('.row')

      // 遍历并克隆每一行元素
      rowElements.forEach(rowElement => {
        const clonedRow = rowElement.cloneNode(true)
        marquee.appendChild(clonedRow)
      })
    })
    this.getJingdianData()
    this.getLuxingsheData()
  },
  methods: {
    async getJingdianData() {
      const { data: res } = await this.$http.post(this.jingdianDataUrl, this.jingdianDataOption)
      if (res !== {}) {
        const transformedData = res.features.map(item => {
          const values = item.fieldValues.slice(2) // 从索引2开始截取数组元素
          return values
        })
        transformedData.pop()

        const transformedData1 = transformedData.map(row => {
          const modifiedRow = row.map(element => {
            if (element === '') {
              return '0'
            } else {
              return element.replace('.0', '')
            }
          })
          return modifiedRow
        })

        const transformedData2 = transformedData1.map(row => {
          const modifiedRow = row.map(element => {
            if (!isNaN(element)) {
              // 判断是否为数字
              return element < 10 ? `0${element}` : `${element}`
            } else {
              return element
            }
          })
          return modifiedRow
        })

        this.jingdianRows = transformedData2
      }
    },
    async getLuxingsheData() {
      const { data: res } = await this.$http.post(this.luxingsheDataUrl, this.luxingsheDataOption)
      const result = res.features.map(item => [item.fieldValues[3], item.fieldValues[4]])
      this.luxingsheRows = result
    },
    changeToJingdian() {
      this.active = 'jingdian'
      this.activeColor = 'red'
    },
    changeToLuxingshe() {
      this.active = 'luxingshe'
      this.activeColor = 'blue'
    }
  }
}
</script>

<style lang="less" scoped>
.numContainer {
  display: flex;
  width: 280px;
  height: 380px;
  border: 10px solid pink;
  border-width: 51px 38px 20px 132px;
  border-image-source: url(../../assets/images/border.png);
  border-image-slice: 51 38 20 132;
  margin-bottom: 20px;
}

.bcColor {
  position: absolute;
  top: 10px;
  left: 6px;
  width: 430px;
  height: 410px;
  background-color: #00253170;
  // border: 2px solid #1950c4;
  box-shadow: 0 0 5px #0084ff, 0 0 10px #0084ff, 0 0 20px #0084ff;
  // border-radius: 8%;
}

.inner {
  position: absolute;
  width: 430px;
  height: 400px;
  top: 0px;
  left: 0px;
  right: -38px;
  bottom: -20px;
  padding: 24px 36px;
}

.monitor {
  height: 480px;
  background-image: url(/src/assets/images/rect.png);
  background-size: cover;
}

.monitor .inner {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
}

.monitor .tabs {
  padding: 0 36px;
  margin-bottom: 18px;
  display: flex;
}

.monitor .tabs a {
  color: #00ffa8;
  font-size: 18px;
  padding: 0 27px;
  text-decoration: none;
}

.monitor .tabs a:first-child {
  padding-left: 0;
  border-right: 2px solid #00f2f1;
}

.monitor .tabs a.active {
  color: #ff0000;
  font-weight: bold;
}

.monitor .content {
  flex: 1;
  position: relative;
  display: none;
}

.monitor .head {
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 12px 36px;
  color: #00bfff;
  font-size: 14px;
}

.monitor .head1 {
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 12px 36px;
  color: #00bfff;
  font-size: 14px;
}

.head1 span:nth-child(2) {
  position: absolute;
  top: 11px;
  left: 175px;
}

.monitor .marquee-view {
  position: absolute;
  top: 40px;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}

.monitor .row {
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  font-size: 12px;
  color: #0073ff;
  padding: 12px 36px;
}

.monitor .row .icon-dot {
  position: absolute;
  left: 16px;
  opacity: 0;
}

.monitor .row:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fd0000;
}

.monitor .row:hover .icon-dot {
  opacity: 1;
}

.monitor .col:nth-child(2) {
  // width: 200px;
  // white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.marquee1 span:first-child {
  width: 120px;
  word-wrap: break-word;
}

.marquee1 span:nth-child(2) {
  width: 250px;
  word-wrap: break-word;
}

.marquee-view .marquee {
  animation: move 10s linear infinite;
}

.marquee-view .marquee1 {
  animation: move1 15s linear infinite;
}

@keyframes move {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

@keyframes move1 {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-2%);
  }
}

.marquee-view .marquee:hover {
  animation-play-state: paused;
}

.marquee-view .marquee1:hover {
  animation-play-state: paused;
}
</style>
